<template>
  <div class="my_manage">
    <div class="apply_detail">
      <!--时间轴-->
      <template>
        <el-timeline>
          <!--请假-->
          <el-timeline-item
            v-if="allDetail.leaves && allDetail.leaves.length > 0"
            timestamp="请假"
            placement="top"
            icon="el-icon-check"
            color="#3a9aff"
            v-for="(item, qj) in allDetail.leaves"
            :key="qj + 'qjs'"
            class="item"
          >
            <el-card shadow="hover">
              <el-row>
                <el-col :span="8" class="width_label1">
                  <p>
                    <span>申请人：</span><span>{{ allDetail.name }}</span>
                  </p>
                  <p>
                    <span>院系：</span><span>{{ allDetail.deptname }}</span>
                  </p>
                  <p>
                    <span>年级：</span><span>{{ allDetail.syndeptname }}</span>
                  </p>

                  <p>
                    <span>学号：</span><span>{{ allDetail.sno }}</span>
                  </p>

                  <p>
                    <span>宿舍楼栋：</span><span>{{ item.building }}</span>
                  </p>
                </el-col>
                <el-col :span="8" class="width_label2">
                  <p>
                    <span>提交时间：</span
                    ><span>{{ allDetail.createtime }}</span>
                  </p>

                  <p>
                    <span>请假开始时间：</span><span>{{ item.starttime }}</span>
                  </p>
                  <p>
                    <span>请假结束时间：</span><span>{{ item.endtime }}</span>
                  </p>

                  <p>
                    <span>请假类型：</span><span>{{ item.type }}</span>
                  </p>
                  <p>
                    <span>当前状态：</span
                    ><span>{{ billstate[item.state] }}</span>
                  </p>
                </el-col>
                <el-col :span="8" class="width_label2">
                  <p>
                    <span>目的地：</span><span>{{ item.destination }}</span>
                  </p>
                  <p>
                    <span>交通方式：</span
                    ><span>{{ item.transportation }}</span>
                  </p>
                  <p
                    v-if="
                      item.transportation == '飞机' ||
                      item.transportation == '火车'
                    "
                  >
                    <span>抵达类型：</span
                    ><span>{{ transtype[item.transtype] }}</span>
                  </p>
                  <p v-if="item.transplace">
                    <span>途径地/其他方式：</span
                    ><span>{{ item.transplace }}</span>
                  </p>
                  <p>
                    <span>航班/车次：</span><span>{{ item.trainnumber }}</span>
                  </p>
                  <p>
                    <span>请假原因：</span><span>{{ item.reasons }}</span>
                  </p>

                  <p v-if="item.remark">
                    <span>取消原因：</span><span>{{ item.remark }}</span>
                  </p>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" class="width_label3">
                  <div class="aui-line-box">
                    <ul class="aui-line-list">
                      <li v-for="(iItem, i) in item.steps" :key="i + '2'">
                        <div class="aui-line-text">
                          <p>
                            <span>审批时间:</span>
                            <span>{{ iItem.approvetime }}</span>
                          </p>
                          <p>
                            <span>审批人：</span
                            ><span>
                              {{
                                iItem.approvename == ""
                                  ? role[iItem.roleid]
                                  : iItem.approvename
                              }}
                            </span>
                          </p>
                          <p>
                            <span>审批结果：</span
                            ><span>{{ SPResult(iItem.status) }}</span>
                          </p>
                          <p v-if="iItem.reason">
                            <span>审批意见：</span
                            ><span>{{ iItem.reason }}</span>
                          </p>
                          <p v-if="iItem.approver">
                            <span>审批人学号：</span
                            ><span>{{ iItem.approver }}</span>
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-timeline-item>

          <!--入校-->
          <el-timeline-item
            v-if="allDetail.comes && allDetail.comes.length > 0"
            timestamp="入校"
            placement="top"
            icon="el-icon-check"
            color="#fe5c63"
            v-for="(item, rx) in allDetail.comes"
            :key="rx + 'rxs'"
            class="item"
          >
            <el-card shadow="hover">
              <el-row>
                <el-col :span="8" class="width_label4">
                  <p>
                    <span>申请入校时间：</span><span>{{ item.cometime }}</span>
                  </p>
                  <p>
                    <span>当前状态：</span
                    ><span>{{ billstate[item.state] }}</span>
                  </p>
                  <p>
                    <span>14天是否密切接触：</span>
                    <span v-if="item.isfourthtouth == 1">是</span>
                    <span v-else>否</span>
                  </p>
                  <p>
                    <span>健康状况是否异常：</span>
                    <span v-if="item.isnothealth == 1">是</span>
                    <span v-else>否</span>
                  </p>
                  <p>
                    <span>是否发烧、气促、等呼吸道状况：</span>
                    <span v-if="item.isfever == 1">是</span>
                    <span v-else>否</span>
                  </p>
                  <p>
                    <span>14天是否途径或有高风险地区旅行史：</span>
                    <span v-if="item.isfourthrisk == 1">是</span>
                    <span v-else>否</span>
                  </p>
                </el-col>
                <el-col :span="8" class="width_label4">
                  <p>
                    <span>来源地：</span><span>{{ item.visits }}</span>
                  </p>
                  <p>
                    <span>交通方式：</span
                    ><span>{{ item.transportation }}</span>
                  </p>
                  <p
                    v-if="
                      item.transportation == '飞机' ||
                      item.transportation == '火车'
                    "
                  >
                    <span>抵达类型：</span
                    ><span>{{ transtype[item.transtype] }}</span>
                  </p>
                  <p v-if="item.transplace">
                    <span>途径地/其他方式：</span
                    ><span>{{ item.transplace }}</span>
                  </p>
                  <p>
                    <span>航班/车次：</span><span>{{ item.trainnumber }}</span>
                  </p>
                  <p v-if="item.remark">
                    <span>取消原因：</span><span>{{ item.remark }}</span>
                  </p>
                  <p>
                    <span>备注：</span><span>{{ item.remark }}</span>
                  </p>
                  <p>
                    <span>提交时间： </span><span>{{ item.createtime }}</span>
                  </p>
                </el-col>
                <el-col :span="8" class="width_label4">
                  <div class="pic_wrap">
                    <div style="margin-bottom: 10px">健康码</div>
                    <img style="display: none;" :src="imgBaseURL+item.healthcodeimg"/>
                    <el-image
                      style="width: 150px; height: 150px"
                      :src="imgBaseURL+item.healthcodeimg"
                      :preview-src-list="[
                        imgBaseURL+item.healthcodeimg,
                      ]"
                    >
                    </el-image></div
                ></el-col>
              </el-row>
              <el-row>
                <div class="aui-line-box">
                  <ul class="aui-line-list">
                    <li v-for="(iItem, i) in item.steps" :key="i + '3'">
                      <div class="aui-line-text">
                        <p>
                          <span>审批时间:</span>
                          <span>{{ iItem.approvetime }}</span>
                        </p>
                        <p>
                          <span>审批人：</span
                          ><span>
                            {{
                              iItem.approvename == ""
                                ? role[iItem.roleid]
                                : iItem.approvename
                            }}
                          </span>
                        </p>
                        <p>
                          <span>审批结果：</span
                          ><span>{{ SPResult(iItem.status) }}</span>
                        </p>
                        <p v-if="iItem.reason">
                          <span>审批意见：</span><span>{{ iItem.reason }}</span>
                        </p>
                        <p v-if="iItem.approver">
                          <span>审批人学号：</span
                          ><span>{{ iItem.approver }}</span>
                        </p>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-row>
            </el-card>
          </el-timeline-item>
          <!--销假-->
          <el-timeline-item
            v-if="allDetail.removes && allDetail.removes.length > 0"
            timestamp="销假"
            placement="top"
            icon="el-icon-check"
            color="#ff984e"
            v-for="(item, xj) in allDetail.removes"
            :key="xj + 'xjs'"
            class="item"
          >
            <el-card shadow="hover">
              <el-row>
                <el-col :span="8" class="width_label2">
                  <h4>
                    <span>当前状态：</span
                    ><span>{{ billstate[item.state] }}</span>
                  </h4>
                  <p>
                    <span>入校时间：</span><span>{{ item.realcometime }}</span>
                  </p>
                  <h4 v-if="item.state != 1"> 出入记录</h4>
                  <div v-if="item.state != 1">
                    <template v-for="item in inOutRecords" >
                      <p>{{ item.position }}：{{ item.inouttime }}</p>
                    </template>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <div class="aui-line-box">
                  <ul class="aui-line-list">
                    <li v-for="(iItem, i) in item.steps" :key="i + '3'">
                      <div class="aui-line-text">
                        <p>
                          <span>审批时间:</span>
                          <span>{{ iItem.approvetime }}</span>
                        </p>
                        <p>
                          <span>审批人：</span
                          ><span>
                            {{
                              iItem.approvename == ""
                                ? role[iItem.roleid]
                                : iItem.approvename
                            }}
                          </span>
                        </p>
                        <p>
                          <span>审批结果：</span
                          ><span>{{ SPResult(iItem.status) }}</span>
                        </p>
                        <p v-if="iItem.reason">
                          <span>审批意见：</span><span>{{ iItem.reason }}</span>
                        </p>
                        <p v-if="iItem.approver">
                          <span>审批人学号：</span
                          ><span>{{ iItem.approver }}</span>
                        </p>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-row>
            </el-card>
          </el-timeline-item>

          <div class="aui-ine-busy" v-if="isShow">
            <div class="btn_wrap">
              <el-button
                @click="ApproveSubmitBtn(1)"
                type="primary"
                size="small"
                ><i class="el-icon-check"></i> 通过审批</el-button
              >
              <el-button
                @click="ApproveSubmitBtn(2)"
                type="warning"
                size="small"
                ><i class="el-icon-refresh-right"></i> 转审</el-button
              >
              <el-button @click="ApproveSubmitBtn(0)" type="danger" size="small"
                ><i class="el-icon-close"></i> 拒绝</el-button
              >
            </div>
          </div>
          <div v-if="isInvoidShow" style="margin-left: 30px">
            <el-button @click="ApproveSubmitBtn(0)" type="danger" size="small"
              ><i class="el-icon-close"></i> 作废</el-button
            >
          </div>
        </el-timeline>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "detail_manage",
  data() {
    return {
      role: {
        2: "辅导员",
        3: "院系管理员",
      },

      isShow: false,
      isInvoidShow: false,
      sno: "",
      apprmainid: "",
      allDetail: {},
      //审批结果 1同意，2拒绝，3待审批，4未接收
      shenpiResult: [
        {
          value: 1,
          label: "同意",
        },
        {
          value: 2,
          label: "拒绝",
        },
        {
          value: 3,
          label: "待审批",
        },
        {
          value: 4,
          label: "未接收",
        },
        {
          value: 5,
          label: "转审",
        },
      ],
      //单据状态
      billstate: {
        0: "审批中",
        1: "取消",
        2: "作废",
        3: "审批完成",
        4: "审批退回",
      },
      //抵达类型
      transtype: {
        1: "直达",
        2: "经停",
      },
      srcList: [],
      inOutRecords: [], //门禁记录
      userInfo: {}, //用户信息
      approve: {
        apprmainid: "", //主流程id
        apprresult: 1, //1：同意、2：拒绝、3：转审
        opinion: "", //拒绝、转审的原因
      },
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("my_user"));
    console.log("this.userInfo", this.userInfo);
    this.apprmainid = this.$route.query.apprmainid;
    this.getDetailData();
  },
  watch: {
    $route(to, from) {
      if (from.name != "ApplyDetail") {
        this.apprmainid = this.$route.query.apprmainid;
        this.getDetailData();
      }
    },
  },
  methods: {
    isShowFac() {
      //审批按钮显示隐藏
      this.isShow = false;
      this.isInvoidShow = false;
      //超级管理员 不做操作
      if (this.userInfo.roleid == 1) {
        return;
      }
      let allDetail = this.allDetail;
      if (allDetail.status < 4 && allDetail.stepstate == 2) {
        switch (allDetail.status) {
          case 1:
            let approving = allDetail.leaves.filter(
              (item) => item.state == 0
            )[0];
            if (approving) {
              if (
                approving.steps.filter(
                  (i) => this.userInfo.roleid == i.roleid && i.status == 3
                )[0]
              ) {
                this.isShow = true;
              }
            }
            break;
          case 2:
            let approvingc = allDetail.comes.filter(
              (item) => item.state == 0
            )[0];
            if (approvingc) {
              if (
                approvingc.steps.filter(
                  (i) => this.userInfo.roleid == i.roleid && i.status == 3
                )[0]
              ) {
                this.isShow = true;
              }
            }
            break;
          case 3:
            let approvingr = allDetail.removes.filter(
              (item) => item.state == 0
            )[0];
            if (approvingr) {
              if (
                approvingr.steps.filter(
                  (i) => this.userInfo.roleid == i.roleid && i.status == 3
                )[0]
              ) {
                this.isShow = true;
              }
            }
            break;
        }
      }
      //作废按钮显示隐藏
      //角色为辅导员并且辅导员审批过时 且整体未完结时 有作废按钮
      if (this.userInfo.roleid == 2 && allDetail.status < 4) {
        //判断当前审批步骤
        switch (allDetail.status) {
          case 1:
            //审批完成（通过、拒绝）
            if (
              allDetail.leaves.filter(
                (item) => item.state == 3 || item.state == 4
              ).length > 0
            ) {
              this.isInvoidShow = true;
            } else {
              //有效审批正在进行存在转审（转审）
              let leaving = allDetail.leaves.filter(
                (item) => item.state === 0
              )[0];
              if (leaving.steps.filter((i) => i.status == 5).length > 0) {
                this.isInvoidShow = true;
              }
            }
            break;
          case 2:
            //审批完成（通过、拒绝）
            if (
              allDetail.comes.filter(
                (item) => item.state == 3 || item.state == 4
              ).length > 0
            ) {
              this.isInvoidShow = true;
            } else {
              //有效审批正在进行存在转审（转审）
              let coming = allDetail.comes.filter(
                (item) => item.state === 0
              )[0];
              if (coming.steps.filter((i) => i.status == 5).length > 0) {
                this.isInvoidShow = true;
              }
            }
            break;
          case 3:
            //审批拒绝（拒绝）
            if (
              allDetail.removes.filter((item) => item.state == 4).length > 0
            ) {
              this.isInvoidShow = true;
            } else {
              //有效审批正在进行存在转审（转审）
              let removing = allDetail.removes.filter(
                (item) => item.state === 0
              )[0];
              if (removing.steps.filter((i) => i.status == 5).length > 0) {
                this.isInvoidShow = true;
              }
            }
            break;
        }
      }
    },

    //审批按钮
    ApproveSubmitBtn(apprresult) {
      let that = this;
      //apprresult, //1：同意、0：拒绝、2：转审
      switch (apprresult) {
        case 0:
          that
            .$prompt("请输入拒绝原因", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
            })
            .then(({ value }) => {
              that.approve.opinion = value;
              that.ApproveSubmit(apprresult);
            })
            .catch(() => {});
          break;
        case 1:
          this.$confirm("确定通过审批, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              that.ApproveSubmit(apprresult);
            })
            .catch(() => {});
          break;
        case 2:
          that
            .$prompt("请输入转审原因", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
            })
            .then(({ value }) => {
              that.approve.opinion = value;
              that.ApproveSubmit(apprresult);
            })
            .catch(() => {});
          break;
        default:
          break;
      }
    },
    //审批接口调取
    ApproveSubmit(apprresult) {
      let that = this;
      that
        .postAxios("/Approve/Approve", {
          apprmainid: that.approve.apprmainid,
          apprresult: apprresult, //1：同意、0：拒绝、2：转审
          opinion: that.approve.opinion, //拒绝、转审的原因
        })
        .then((res) => {
          if (res.code == 0) {
            that.$message({
              type: "success",
              message: "操作成功！",
              onClose: function () {
                that.$router.go(-1);
              },
            });
          }
        });
    },
    //审批结果
    SPResult(val) {
      let arr = this.shenpiResult;
      for (let i = 0; i < arr.length; i++) {
        if (val == arr[i].value) {
          return arr[i].label;
        }
      }
    },
    getDetailData() {
      let that = this;
      that
        .postAxios("/Approve/ApproveDetail?apprmainid=" + that.apprmainid, null)
        .then((res) => {
          if (res.code == 0) {
            that.allDetail = res.data;
            that.approve.apprmainid = res.data.id;
            that.isShowFac();
            that.getIn();
          }
        });

    },
    getIn(){
      let that = this;
      //门禁流水
       that
          .postAxios(
            "/Approve/GetInOutRecords?sno=" +
              that.allDetail.creator +
              "&date=" +
              that.allDetail.realcometime
          )
          .then((res) => {
            if (res.code == 0) {
              that.inOutRecords = res.data;
            }
          });
    }
  },
};
</script>

<style scoped lang="scss">
.my_manage {
  height: 100%;
  width: 100%;
  .apply_detail {
    margin: 20px;
    padding-bottom: 50px;
    .my_card {
      .btn_wrap {
        margin-top: 10px;
      }
      .pic_wrap {
        width: 200px;
      }
    }
    .item {
      span:nth-child(1) {
        color: #333;
        display: inline-block;
      }

      span:nth-child(2) {
        color: #8a8a8a;
        word-wrap: break-word;
      }
    }
    .width_label1 {
      span:nth-child(1) {
        color: #333;
        width: auto;
        display: inline-block;
      }
      p {
        padding: 3px 0;
      }
    }
    .width_label2 {
      span:nth-child(1) {
        color: #333;
        width: auto;
        display: inline-block;
      }
      p {
        padding: 3px 0;
      }
    }
    .width_label3 {
      span:nth-child(1) {
        color: #333;
        width: auto;
        display: inline-block;
      }
      p {
        padding: 3px 0;
      }
    }
    .width_label4 {
      span:nth-child(1) {
        color: #333;
        width: auto;
        display: inline-block;
      }
      span:nth-child(2) {
        color: #8a8a8a;
        width: auto;
        display: inline-block;
      }
      p {
        padding: 3px 0;
      }
    }
  }
}
</style>
<style type="text/css" lang="scss">
.pic_wrap {
  .el-image-viewer__canvas {
    img {
      width: initial !important;
    }
  }
}

.aui-line-box {
  width: 97%;
  position: relative;
  overflow: hidden;
  background: #f0f6ff;
  border-radius: 3px;
  margin-top: 15px;
  padding: 0.5% 1.5% 1.5% 1.5%;
}

.aui-line-list li {
  width: 25%;
  float: left;
  position: relative;
  padding-top: 15px;
}
.aui-line-list {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 20px;
}
.aui-line-list li::after {
  height: 2px;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  background: #66b1ff;
}

.aui-line-list li::before {
  width: 8px;
  height: 8px;
  position: absolute;
  z-index: 0;
  top: -4px;
  left: 0;
  content: "";
  background: #fff;
  border-radius: 100px;
  z-index: 1;
  border: 2px solid #66b1ff;
}
.aui-line-list li:last-child::after {
  background: none;
}
.el-timeline-item__node--normal {
  width: 16px;
  height: 16px;
  left: -3px;
}
.el-card {
  border: 0;
}
.el-timeline-item__timestamp {
  color: #20252f;
  font-size: 14px;
  margin-bottom: 10px;
}

.aui-ine-busy {
  margin-top: 10px;
  margin-left: 30px;
}

.aui-ine-busy .el-button--primary {
  background: #5a94ff;
  border-color: #5a94ff;
  font-size: 13px;
}

.el-button--warning {
  background: #ffaa2b;
  border-color: #ffaa2b;
  font-size: 13px;
}

.el-button--danger {
  background: #ff6464;
  border-color: #ff6464;
  font-size: 13px;
}

.el-image-viewer__close {
  color: white;
}

.aui-line-text p span:nth-child(2) {
  color: #8a8a8a;
  width: auto;
  display: inline-block;
}
</style>